<!doctype html><html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="IE=edge,chrome=1">
<title>部署前端静态文件的简单步骤 - Taxodium</title>
<meta name=renderer content="webkit">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1">
<meta http-equiv=cache-control content="no-transform">
<meta http-equiv=cache-control content="no-siteapp">
<meta name=theme-color content="#f8f5ec">
<meta name=msapplication-navbutton-color content="#f8f5ec">
<meta name=apple-mobile-web-app-capable content="yes">
<meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec">
<meta name=author content="Spike Leung"><meta name=description content="&#34;&#34;"><meta name=keywords content="[]">
<meta name=generator content="Hugo 0.88.1 with theme even">
<link rel=canonical href=http://localhost:1313/taxodium/post/deploy-static-file-to-server/>
<link rel=apple-touch-icon sizes=180x180 href=/taxodium/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=/taxodium/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/taxodium/favicon-16x16.png>
<link rel=manifest href=/taxodium/manifest.json>
<link rel=mask-icon href=/taxodium/safari-pinned-tab.svg color=#5bbad5>
<script async src=//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js></script>
<link href=/taxodium/sass/main.min.f92fd13721ddf72129410fd8250e73152cc6f2438082b6c0208dc24ee7c13fc4.css rel=stylesheet>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin=anonymous>
<meta property="og:title" content="部署前端静态文件的简单步骤">
<meta property="og:description" content="&#34;&#34;">
<meta property="og:type" content="article">
<meta property="og:url" content="http://localhost:1313/taxodium/post/deploy-static-file-to-server/"><meta property="article:section" content="post">
<meta property="article:published_time" content="2021-08-15T12:44:12+08:00">
<meta property="article:modified_time" content="2021-08-15T15:45:36+08:00">
<meta itemprop=name content="部署前端静态文件的简单步骤">
<meta itemprop=description content="&#34;&#34;"><meta itemprop=datePublished content="2021-08-15T12:44:12+08:00">
<meta itemprop=dateModified content="2021-08-15T15:45:36+08:00">
<meta itemprop=wordCount content="2016">
<meta itemprop=keywords content><meta name=twitter:card content="summary">
<meta name=twitter:title content="部署前端静态文件的简单步骤">
<meta name=twitter:description content="&#34;&#34;"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]-->
</head>
<body>
<div id=mobile-navbar class=mobile-navbar>
<div class=mobile-header-logo>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<div class=mobile-navbar-icon>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id=mobile-menu class="mobile-menu slideout-menu">
<ul class=mobile-menu-list>
<a href=/taxodium/>
<li class=mobile-menu-item>Home</li>
</a><a href=/taxodium/post/>
<li class=mobile-menu-item>Archives</li>
</a><a href=/taxodium/tags/>
<li class=mobile-menu-item>Tags</li>
</a><a href=/taxodium/categories/>
<li class=mobile-menu-item>Categories</li>
</a><a href=/taxodium/about/>
<li class=mobile-menu-item>About</li>
</a>
</ul>
</nav>
<div class=container id=mobile-panel>
<header id=header class=header>
<div class=logo-wrapper>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<nav class=site-navbar>
<ul id=menu class=menu>
<li class=menu-item>
<a class=menu-item-link href=/taxodium/>Home</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/post/>Archives</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/tags/>Tags</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/categories/>Categories</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/about/>About</a>
</li>
</ul>
</nav>
</header>
<main id=main class=main>
<div class=content-wrapper>
<div id=content class=content>
<article class=post>
<header class=post-header>
<h1 class=post-title>部署前端静态文件的简单步骤</h1>
<div class=post-meta>
<span class=post-time> 2021-08-15 </span>
<div class=post-category>
<a href=/taxodium/categories/deploy/> deploy </a>
</div>
<span class=more-meta> 2016 words </span>
<span class=more-meta> 5 mins read </span>
<span id=busuanzi_container_page_pv class=more-meta> <span id=busuanzi_value_page_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> times read </span>
</div>
</header>
<div class=post-toc id=post-toc>
<h2 class=post-toc-title>Contents</h2>
<div class="post-toc-content always-active">
<nav id=TableOfContents>
<ul>
<li><a href=#headline-1>打包构建</a>
</li>
<li><a href=#headline-2>tar打包</a>
<ul>
<li><a href=#headline-3>压缩</a>
</li>
</ul>
</li>
<li><a href=#headline-4>scp 上传 tar 包</a>
</li>
<li><a href=#headline-5>4. ssh 到目标机器</a>
<ul>
<li><a href=#headline-6>避免重复输入密码</a>
</li>
<li><a href=#headline-7>移除过期的指纹</a>
</li>
</ul>
</li>
<li><a href=#headline-8>解压 tar 包</a>
</li>
<li><a href=#headline-9>节省手动操作</a>
</li>
<li><a href=#headline-10>进一步节省操作</a>
</li>
<li><a href=#headline-11>参考链接</a>
</li>
</ul>
</nav>
</div>
</div>
<div class=post-outdated>
<div class=hint>
<p>[NOTE] Updated <span class=timeago datetime=2021-08-15T15:45:36 title="August 15, 2021">August 15, 2021</span>. This article may have outdated content or subject matter.</p>
</div>
</div>
<div class=post-content>
<p>
笔者目前使用 Vue 开发，开发完成后需要构建静态文件，部署到服务器上，例如 Nginx, 本文将介绍从构建到部署过程中的步骤，
涉及到的一些命令 如 <code>tar</code>, <code>ssh</code>, <code>scp</code>, 以及笔者的一些小技巧。</p>
<div id=outline-container-headline-1 class=outline-2>
<h2 id=headline-1>
打包构建
</h2>
<div id=outline-text-headline-1 class=outline-text-2>
<p>
执行你项目中的打包命令进行打包即可，也许是 <code>yarn build</code> ， 也许是 <code>npm run build</code>, 具体可以看 <code>package.json</code> 中 <code>scripts</code> 中的
定义。</p>
<p>
如果没有定义，则翻阅文档找找构建工具的构建命令即可，例如这是<a href=https://cn.vitejs.dev/guide/static-deploy.html>Vite的构建部署文档</a>。</p>
<p>
在构建前需要注意的：</p>
<ul>
<li>
<p>最好执行 <code>yarn~/~npm install</code> 安装当前 <code>package.json</code> 中指定的最新依赖，避免其他同事更新了依赖，但本地还没更新的问题</p>
</li>
<li>
<p>也许你需要打上一个版本号，方便跟踪当前的版本。(关于版本号定义，可以参考 <a href=https://semver.org/lang/zh-CN/>语义化版本 </a>)</p>
</li>
<li>
<p>也许你还需要设置一些部署时的环境变量或配置</p>
</li>
<li>
<p>…</p>
</li>
</ul>
</div>
</div>
<div id=outline-container-headline-2 class=outline-2>
<h2 id=headline-2>
tar打包
</h2>
<div id=outline-text-headline-2 class=outline-text-2>
<p>当执行完构建后， 在某个目录下，会生成若干的静态文件，把静态文件上传到服务器上对应的目录，即可以通过服务器访问构建好的静态文件了。</p>
<p>
在上传时，如果一个一个文件上传，会有些麻烦， 我们可以先将这些静态文件打包成一个 tar 包再一次性上传。</p>
<div id=outline-container-headline-3 class=outline-3>
<h3 id=headline-3>
压缩
</h3>
<div id=outline-text-headline-3 class=outline-text-3>
<p>
进入到静态文件所在的目录</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=nb>cd</span> path/to/dist</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
将静态文件压缩为一个 tar 包</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>tar -zcvf build_1.0.tar.gz *</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
参数解释：</p>
<ul>
<li>
<p><code>-c</code> 表示创建，等同于 <code>--create</code></p>
</li>
<li>
<p><code>-v</code> 显示打包时的详细输出</p>
</li>
<li>
<p><code>-z</code> 使用 Gzip 对打包文件进行压缩</p>
</li>
<li>
<p><code>-f</code> 指定打包后的文件名</p>
</li>
<li>
<p><code>*</code> 表示打包当前目录下的所有文件，你也可以指定一个一个的文件进行打包</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id=outline-container-headline-4 class=outline-2>
<h2 id=headline-4>
scp 上传 tar 包
</h2>
<div id=outline-text-headline-4 class=outline-text-2>
<p>打包完之后，需要把 tar 包上传到服务器，可以使用 <code>scp</code> 命令， 假设要上传到 <code>1.1.1.1</code> 上的 <code>/home</code> 目录, 使用 <code>1.1.1.1</code> 的 <code>root</code> 用户。</p>
<div class="src src-text">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-text data-lang=text>scp path/to/tar root@1.1.1.1:/home</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
命令解释：</p>
<ul>
<li>
<p>命令格式: <code>scp source copy</code> 从 <code>source</code> 传到 <code>copy</code></p>
</li>
<li>
<p><code>path/to/tar</code> tar 包所在的路径</p>
</li>
<li>
<p><code>root@1.1.1.1:/home</code> 要上传的位置</p>
<ul>
<li>
<p><code>root@1.1.1.1</code> 使用 <code>root</code> 登录 <code>1.1.1.1</code> ，进行连接</p>
</li>
<li>
<p><code>:</code> 分隔目标机器和目录</p>
</li>
<li>
<p><code>/home</code> 上传到机器上的目录</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id=outline-container-headline-5 class=outline-2>
<h2 id=headline-5>
4. ssh 到目标机器
</h2>
<div id=outline-text-headline-5 class=outline-text-2>
<p>要解压目标机器上的 tar 包，先要连接到目标机器，可以使用 <code>ssh</code> 命令。</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>ssh root@1.1.1.1
The authenticity of host <span class=s1>&#39;1.1.1.1 (1.1.1.1)&#39;</span> can<span class=err>&#39;</span>t be established.
nECDSA key fingerprint is SHA256:2CDXn8/+GTFrUT7ayu0BRrKAVShN7P13wO0bSJdSAW4.
Are you sure you want to <span class=k>continue</span> connecting <span class=o>(</span>yes/no/<span class=o>[</span>fingerprint<span class=o>])</span>?</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
命令解释:</p>
<ul>
<li>
<p>使用 <code>root</code> 用户通过 <code>ssh</code> 连接 <code>1.1.1.1</code> 的机器</p>
</li>
<li>
<p>这里需要确认服务器的指纹，输入 <code>yes</code> 就好了 (不过出于安全考虑，你也可以验证一下这个指纹对不对，确定是你要连接的目标机器)</p>
<ul>
<li>
<p>这里是因为机器之前没连接过，要把目标机器的公钥存储到下来， 用来下次识别目标机器</p>
</li>
</ul>
</li>
</ul>
<div id=outline-container-headline-6 class=outline-3>
<h3 id=headline-6>
避免重复输入密码
</h3>
<div id=outline-text-headline-6 class=outline-text-3>
<p>每次使用 <code>ssh</code> 命令，都要重新输入一次密码，着实麻烦，通过把 <code>ssh</code> 密钥存到服务器上，可以避免每次连接时输入密码。</p>
<p>
生成密钥</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>&gt; ssh-keygen

Generating public/private rsa key pair.
Enter file in which to save the key <span class=o>(</span>path/to/.ssh/id_rsa<span class=o>)</span>:
...</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
执行完成后，在你指定的路径，如 <code>path/to/.ssh/id_rsa</code> 中，会生成一个密钥，接下来把密钥复制到服务器上，那服务器就认识
我们的机器，就不需要重复输入密码了。</p>
<p>
上传密钥到服务器，让服务器存储起来:</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>ssh-copy-id -i path/to/.ssh/id_rsa.pub root@1.1.1.1</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
参数解释：</p>
<ul>
<li>
<p><code>-i</code> 指定密钥文件，注意，这里的密钥文件对应的是 <strong>公钥</strong> ，以 <code>.pub</code> 结尾的密钥文件</p>
</li>
<li>
<p><code>path/to/.ssh/id_rsa.pub</code> 传给服务器的公钥</p>
</li>
<li>
<p><code>root@1.1.1.1</code> 要上传的目标机器</p>
</li>
</ul>
<p>
第一次执行，还需要输入一次命令，后面就不用啦。</p>
</div>
</div>
<div id=outline-container-headline-7 class=outline-3>
<h3 id=headline-7>
移除过期的指纹
</h3>
<div id=outline-text-headline-7 class=outline-text-3>
<p>前面使用 <code>ssh</code> 连接的时候, 需要确认 <code>fingerprint</code> ，一般会被保存在 <code>~/.ssh/known_host</code> 文件下
（笔者是 Mac 系统，不同系统存放位置可能有差异）</p>
<p>
有时，目标机器可能重装了，或者目标机器的公钥发生了变化，存储在 <code>~/.ssh/known_host</code> 的目标机器的公钥就失效了。</p>
<p>
解决办法就是打开 <code>~/.ssh/known_host</code> ， 删除掉对应机器的公钥，重新用 <code>ssh</code> 连接机器，存储一个新的公钥就好了。</p>
</div>
</div>
</div>
</div>
<div id=outline-container-headline-8 class=outline-2>
<h2 id=headline-8>
解压 tar 包
</h2>
<div id=outline-text-headline-8 class=outline-text-2>
<p>当上传到服务器上后，需要把静态文件从 tar 包中解压出来， 你需要把文件解压到服务器指定的目录下，具体要看你服务器如何配置的。</p>
<p>
假设你使用的是 Nginx， 查看 Nginx 配置， 可以知道要把 tar 包解压到什么目录。</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>  ...

  server <span class=o>{</span>
      listen       9999<span class=p>;</span>
      server_name  localhost<span class=p>;</span>

      <span class=c1>#charset koi8-r;</span>

      <span class=c1>#access_log  logs/host.access.log  main;</span>

      location / <span class=o>{</span>
          <span class=c1># 这里指定了静态文件所在的文件路径</span>
          root /home/hello-world<span class=p>;</span>
          index index.html index.htm<span class=p>;</span>
          try_files <span class=nv>$uri</span> <span class=nv>$uri</span>/ /index.html<span class=p>;</span>
      <span class=o>}</span>

      <span class=c1>#error_page  404              /404.html;</span>

      <span class=c1># redirect server error pages to the static page /50x.html</span>
      <span class=c1>#</span>
      error_page   <span class=m>500</span> <span class=m>502</span> <span class=m>503</span> <span class=m>504</span>  /50x.html<span class=p>;</span>
      <span class=nv>location</span> <span class=o>=</span> /50x.html <span class=o>{</span>
          root   html<span class=p>;</span>
      <span class=o>}</span>

  ...</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
进入到对应的目录</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=nb>cd</span> path/to/static_file_folder</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
执行解压命令</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>tar -xvf build.1.0.tar.gz</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
参数解释：</p>
<ul>
<li>
<p><code>-x</code> 将 tar 包内容解压，等同于 <code>--extract</code></p>
</li>
</ul>
<p>
至此，静态文件的上传已经完成，你应该能够通过服务器访问到这些静态文件了。</p>
</div>
</div>
<div id=outline-container-headline-9 class=outline-2>
<h2 id=headline-9>
节省手动操作
</h2>
<div id=outline-text-headline-9 class=outline-text-2>
<p>上面那么多的步骤，每次都要部署都操作一次，也是有些麻烦，那能不能节省这些操作，一步完成呢？</p>
<p>
结合 Bash 脚本，把上面的命令组合一下，就可以实现了。</p>
<p>
如将以下脚本保存为 <code>tar.sh</code>, 只要执行 <code>./tar.sh</code> 即可完成打包部署的步骤。</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=cp>#!/usr/bin/env sh
</span><span class=cp></span>
<span class=c1># abort on errors</span>
<span class=nb>set</span> -e

<span class=c1># install 更新依赖</span>
yarn

<span class=c1># build 构建</span>
yarn build

<span class=nb>echo</span> <span class=s2>&#34;Build finish!&#34;</span>

<span class=c1># navigate into the build output directory</span>
<span class=nb>cd</span> dist/

  <span class=nb>echo</span> <span class=s2>&#34;tar start&#34;</span>

<span class=c1># 打包压缩构建后的静态文件</span>
tar zcvf build.tar.gz *

<span class=nb>echo</span> <span class=s2>&#34;tar finish&#34;</span>

<span class=nb>echo</span> <span class=s1>&#39;upload to 1.1.1.1 and untar&#39;</span>

<span class=c1># 上传tar包到目标机器，并解压到对应的目录</span>
ssh root@1.1.1.1 <span class=s2>&#34;tar -C /home/hello-world -xz -f-&#34;</span> &lt; build.tar.gz

<span class=nb>echo</span> <span class=s1>&#39;upload &amp; untar done&#39;</span>

<span class=nb>cd</span> -</code></pre></td></tr></table>
</div>
</div>
</div>
<p>
关于 Bash 脚本怎么写，可以看看<a href=https://wangdoc.com/bash/>Bash 脚本教程</a>， 这里解释一下其中的某行脚本：</p>
<div class="src src-bash">
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>ssh root@1.1.1.1 <span class=s2>&#34;tar -C /home/hello-world -xz -f-&#34;</span> &lt; build.tar.gz</code></pre></td></tr></table>
</div>
</div>
</div>
<ul>
<li>
<p><code>ssh root@1.1.1.1</code> 连接机器</p>
</li>
<li>
<p><code>"tar -C /home/hello-world -xz -f-"</code> 连接机器后执行 tar 解压</p>
<ul>
<li>
<p><code>-C</code> 指定解压到什么目录</p>
</li>
<li>
<p><code>-xz</code> 执行解压</p>
</li>
<li>
<p><code>-f</code> 指定解压的tar包</p>
</li>
<li>
<p><code>-</code> 从标准输入中读取, 即读取~build.tar.gz~</p>
</li>
</ul>
</li>
<li>
<p><code>&lt; build.tar.gz</code> 作为tar命令的输入</p>
</li>
</ul>
</div>
</div>
<div id=outline-container-headline-10 class=outline-2>
<h2 id=headline-10>
进一步节省操作
</h2>
<div id=outline-text-headline-10 class=outline-text-2>
<p>尽管写了 bash 脚本，简单的执行一下就能完成部署了，但每次还要手动执行一下。</p>
<p>
能不能每次提交时执行呢？使用一些CI工具就可以实现了，例如<a href=https://docs.github.com/en/actions> GitHub Actions</a>， <a href=https://www.travis-ci.com/>Travis CI</a> 等。</p>
<p>
笔者使用~GitHub Actions~实现了博客的自动部署，也许可以给你一些 <a href=https://spike-leung.github.io/blog/others/deploy-blog-with-github-actions.html>参考</a>。</p>
<p>
此处不做展开，读者可自行探索 :)</p>
</div>
</div>
<div id=outline-container-headline-11 class=outline-2>
<h2 id=headline-11>
参考链接
</h2>
<div id=outline-text-headline-11 class=outline-text-2>
<ul>
<li>
<p><a href=https://wangdoc.com/ssh/index.html>ssh 教程</a></p>
</li>
<li>
<p><a href=https://wangdoc.com/bash/>Bash 脚本教程</a></p>
</li>
<li>
<p><a href=https://www.thegeekdiary.com/how-to-avoid-ssh-from-prompting-key-passphrase-for-passwordless-logins/>How to avoid ssh from prompting key passphrase for passwordless logins</a></p>
</li>
</ul>
</div>
</div>
</div>
<div class=post-copyright>
<p class=copyright-item>
<span class=item-title>Author</span>
<span class=item-content>Spike Leung</span>
</p>
<p class=copyright-item>
<span class=item-title>LastMod</span>
<span class=item-content>
2021-08-15
<a href=https://github.com/Spike-Leung/taxodium/commit/83762c5b74dfdc414fe742c1f389ed9774557446 title="feat: update tags categories notation">(83762c5)</a>
</span>
</p>
<p class=copyright-item>
<span class=item-title>License</span>
<span class=item-content><a rel="license noopener" href=https://creativecommons.org/licenses/by-nc-nd/4.0/ target=_blank>CC BY-NC-ND 4.0</a></span>
</p>
</div>
<footer class=post-footer>
<nav class=post-nav>
<a class=prev href=/taxodium/post/travel-wu-han-20210927/>
<i class="iconfont icon-left"></i>
<span class="prev-text nav-default">武汉两日游</span>
<span class="prev-text nav-mobile">Prev</span>
</a>
<a class=next href=/taxodium/post/use-github-action-deploy-blog/>
<span class="next-text nav-default">使用 GitHub Actions 部署博客到 GitHub Pages</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i>
</a>
</nav>
</footer>
</article>
</div>
<script src=https://utteranc.es/client.js repo=Spike-Leung/taxodium issue-term=pathname theme=github-light crossorigin=anonymous async></script>
<noscript>Please enable JavaScript to view the <a href=https://github.com/utterance>comments powered by utterances.</a></noscript>
</div>
</main>
<footer id=footer class=footer>
<div class=social-links>
<a href=mailto:l-yanlei@hotmail.com class="iconfont icon-email" title=email></a>
<a href=https://github.com/Spike-Leung class="iconfont icon-github" title=github></a>
<a href=http://localhost:1313/taxodium/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a>
</div>
<div class=copyright>
<span class=power-by>
Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span>
<span class=division>|</span>
<span class=theme-info>
Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span>
<div class=busuanzi-footer>
<span id=busuanzi_container_site_pv> site pv: <span id=busuanzi_value_site_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
<span class=division>|</span>
<span id=busuanzi_container_site_uv> site uv: <span id=busuanzi_value_site_uv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
</div>
<span class=copyright-year>
&copy;
2017 -
2021<span class=heart><i class="iconfont icon-heart"></i></span><span>Spike Leung</span>
</span>
</div>
</footer>
<div class=back-to-top id=back-to-top>
<i class="iconfont icon-up"></i>
</div>
</div>
<script src=https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin=anonymous></script>
<script>var languageCode="en".replace(/-/g,'_').replace(/_(.*)/,function(b,a){return b.replace(a,a.toUpperCase())});timeago().render(document.querySelectorAll('.timeago'),languageCode),timeago.cancel()</script>
<script type=text/javascript src=/taxodium/js/main.min.c99b103c33d1539acf3025e1913697534542c4a5aa5af0ccc20475ed2863603b.js></script>
<script id=baidu_push>(function(){var a,c,b;if(window.location.hostname==='localhost')return;a=document.createElement('script'),a.async=!0,c=window.location.protocol.split(':')[0],c==='https'?a.src='https://zz.bdstatic.com/linksubmit/push.js':a.src='http://push.zhanzhang.baidu.com/push.js',b=document.getElementsByTagName("script")[0],b.parentNode.insertBefore(a,b)})()</script>
</body>
</html>